import React, { useEffect, useState } from "react";

import { Table, Space, Input, Form, Modal, Select, Button,DatePicker } from "antd";

import type { ColumnsType } from "antd/es/table";

import Icon, { EditOutlined, DeleteOutlined } from '@ant-design/icons';

import "../../styles/HuYueYue/jihuaform.scss"

// 全部一次性导出来，用的话，直接用service.
import * as service from "../../api/HuYueYue/jixiao.js";

const { RangePicker } = DatePicker;


function JiHuaForm(props: any) {

    let [text, setText] = useState({})

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [ModalOpenture, setModalOpenture] = useState(false);

    // 先把外边的id保存,里面的是回显的，外的id获取不到
    const [jhid,setjhid]=useState("")

    // 获取弹出来的表单中的默认值
    // 控制MyModal的输入框内容 因为 Form 里的 initialValues 不能被 setState，useState 动态更新，你需要用 setFieldsValue 来更新。
    // 在Form中绑定的form 是自己定义的，而Form 引入的从antdesgin 中的
    const [form] = Form.useForm()


    interface DataType {
        key: string;
        name: string;
        address: string;
        tags: string[];
    }

    // 设置表格列
    const columns: ColumnsType<DataType> = [
        {
            title: "考核计划名称",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "考核范围",
            dataIndex: "range",
            key: "range",
        },
        {
            title: "考核周期类型",
            dataIndex: "type",
            key: "type",
        },
        {
            title: "考核状态",
            dataIndex: "state",
            key: "state",
        },
        {
            title: "考核周期",
            dataIndex: "week",
            key: "week",
        },
        {
            title: '操作',
            key: 'operation',
            render: (_, record: { key: React.Key }) =>
         (
                    <div className="operation">

                        <div>发起考核</div>
                        <div className="operation-left"
                            onClick={() => {
                                goModel(record);
                            }}>编辑</div>
                        <div>设为模板</div>
                        <div onClick={() => {
                                queding(record);
                            }}>
                                删除
                                </div>
                    </div>
                ) 

        },

    ];

    var goModel = (key: any) => {
        setIsModalOpen(true);
        console.log(key);
        form.setFieldsValue(key);
        // form.setFieldValue(key)
        setText(key)
        setjhid(key.id)
    }

    const onFinish = (e: any) => {
        setIsModalOpen(false);
        console.log("点击完成后得到的数据",e);
        // 修改的接口
        service.jixiao_jihua_update({
            id:jhid,
            name:e.name,
            range:e.range,
            state:e.state,
            type:e.type,
            week:e.week

        }).then((res)=>{
            console.log("修改的信息",res.data);
            
        })
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const [Dakai, setDakai] = useState(false);
  
    const queding = (key:any) => {
        setDakai(false);
        console.log("确定",key.id);
        
        service.jixiao_jihua_delete({id:key.id}).then((res)=>{
            if (res.data.status==200) {
                console.log('====================================');
                console.log("删除成功！");
                console.log('====================================');
            }
        })
        
        window.location.reload() // 强制页面刷新
     
    };
  
    const quxiao = () => {
      setDakai(false);
    };



    return (
        <div className="manage-form">
            <Table columns={columns} dataSource={props.listKey} pagination={{ pageSize: 6 }} />


            {/* 修改的对话框 */}
            <Modal title="修改" open={isModalOpen} onCancel={handleCancel} footer={null}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={text}
                    autoComplete="off"
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="考核计划名称"
                        name="name"
                        rules={[{ required: true, message: '请输入考核计划名称！'}]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="考核范围"
                        name="range"
                        rules={[{ required: true, message: '请输入正确的考核范围！'}]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="考核周期类型"
                        name="type"
                        rules={[{ required: true, message: '请输入考核周期类型！' }]}
                    >
                    <Select>
                        <Select.Option value="季度">季度</Select.Option>
                        <Select.Option value="月度">月度</Select.Option>
                        <Select.Option value="半月度">半月度</Select.Option>
                        <Select.Option value="半年度">半年度</Select.Option>
                    </Select>
                    </Form.Item>

                    <Form.Item
                        label="考核状态"
                        name="state"
                        rules={[{ required: true, message: '请输入考核状态！' }]}
                    >
                    <Select>
                        <Select.Option value="未开始">未开始</Select.Option>
                        <Select.Option value="已开始">已开始</Select.Option>
                    </Select>
                    </Form.Item>

                    <Form.Item
                        label="考核周期"
                        name="week"
                        rules={[{ required: true, message: '请输入考核周期！' }]}
                    >
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

            
            {/* 删除的对话框 */}
            <Modal title="删除" open={Dakai} onOk={queding} onCancel={quxiao}>
                <p>你确定要删除吗？</p>
            </Modal>
        </div>



    );
}

export default JiHuaForm;